<template>
  <div class="base-info-container">
    <div class="user-info-box" id="userInfoBox">
      <div class="header">
        <div class="member-info">
          <span class="member-info-label">
            {{ $t('msg.member.memberName') }}
            <span class="member-info-content">{{ memberFrom.realName }}</span>
          </span>
          <span class="member-info-label">
            {{ $t('msg.member.memberPoints') }}
            <span class="member-info-content">{{ memberFrom.points }}</span>
          </span>
          <span class="member-info-label">
            {{ $t('msg.member.openTime') }}
            <span class="member-info-content">
              {{
                $filters.dateFilter(memberFrom.createTime, 'YYYY-MM-DD HH:mm')
              }}
            </span>
          </span>
        </div>
        <div class="divider"></div>
        <div class="consume-info">
          <span class="consume-info-content">
            {{ $filters.moneyFilterShow(memberFrom.consumeMoney) }}
          </span>
          <span class="consume-info-label">
            {{ $t('msg.member.consumeMoney') }}
          </span>
        </div>
      </div>
      <div class="content">
        <div style="text-align: right; margin-bottom: 20px">
          <el-button v-if="!edit" type="text" class="edit" @click="onEditClick">
            {{ $t('msg.btn.edit') }}
          </el-button>
          <el-button v-else type="text" class="edit" @click="onShowClick">
            {{ $t('msg.btn.show') }}
          </el-button>
        </div>
        <el-form :model="memberFrom" label-width="auto" style="width: 100%">
          <el-form-item :label="$t('msg.member.cardNumber')">
            <el-input v-model="memberFrom.cardNumber" v-if="edit" />
            <el-label v-else>{{ memberFrom.cardNumber }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.name')">
            <el-input
              v-if="edit"
              v-model="memberFrom.realName"
              :placeholder="$t('msg.member.nameTips')"
            />
            <el-label v-else>{{ memberFrom.realName }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.phone')">
            <el-input
              v-if="edit"
              v-model="memberFrom.phone"
              :placeholder="$t('msg.member.phoneTips')"
            />
            <el-label v-else>{{ memberFrom.phone }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.sex')">
            <el-radio-group v-model="memberFrom.sex" :disabled="!edit">
              <el-radio :label="1">{{ $t('msg.member.sexMale') }}</el-radio>
              <el-radio :label="2">{{ $t('msg.member.sexFemale') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('msg.member.birthday')">
            <el-date-picker
              v-if="edit"
              v-model="memberFrom.birthday"
              type="date"
              :placeholder="$t('msg.member.birthdayTips')"
              style="width: 100%"
            />
            <el-label v-else>{{
              $filters.dateFilter(memberFrom.birthday)
            }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.classifyName')">
            <el-select v-model="memberFrom.classifyId" v-if="edit">
              <el-option
                v-for="(item, index) in classifyList"
                :key="index"
                :label="item.classifyName"
                :value="item.id"
              />
            </el-select>
            <el-label v-else>{{ memberFrom.classifyName }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.idCard')">
            <el-input
              v-if="edit"
              v-model="memberFrom.idCard"
              :placeholder="$t('msg.member.idCardTips')"
            />
            <el-label v-else>{{ memberFrom.idCard }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.member.remark')">
            <el-input v-if="edit" v-model="memberFrom.remark" type="textarea" />
            <el-label v-else>{{ memberFrom.remark }}</el-label>
          </el-form-item>
          <el-form-item class="btns" v-if="edit">
            <el-button type="primary" :loading="loading" @click="handlerEdit">{{
              $t('msg.btn.submit')
            }}</el-button>
            <el-button>{{ $t('msg.btn.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onActivated } from 'vue'
import { memberClassifyList, editMember, memberDetail } from '@/api/member'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const router = useRouter()
const props = defineProps({
  memberInfo: {
    type: Object,
    required: true
  }
})
const memberFrom = ref({ ...props.memberInfo })

const edit = ref(false)
const loading = ref(false)
const classifyList = ref([])
const getMemberBaseInfo = () => {
  memberFrom.value = props.memberInfo
}

const getClassifyList = async () => {
  classifyList.value = await memberClassifyList()
}
getClassifyList()
onActivated(getMemberBaseInfo)

const onEditClick = () => {
  edit.value = true
}

const onShowClick = () => {
  edit.value = false
}
const i18n = useI18n()

const getMemberDetail = async () => {
  memberFrom.value = await memberDetail(props.memberInfo.id)
}
const handlerEdit = () => {
  loading.value = true
  editMember(memberFrom.value)
    .then(() => {
      loading.value = false
      edit.value = false
      ElMessage.success(i18n.t('msg.member.editMemberSuccess'))
      router.push(`/member/detail/${props.memberInfo.id}`)
      getMemberDetail()
    })
    .catch((err) => {
      console.log(err)
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.base-info-container {
  text-align: center;
  .user-info-box {
    width: 600px;
    margin: 0 auto;
    .header {
      display: flex;
      height: 120px;
      flex-direction: row;
      .member-info {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        .member-info-label {
          display: block;
          font-size: 14px;
          margin-top: 10px;
        }
        .member-info-content {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .divider {
        width: 2px;
        border-left: 2px solid #eee;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
      }
      .consume-info {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        .consume-info-label {
          display: block;
          font-size: 14px;
          margin-top: 10px;
          color: #999;
        }
        .consume-info-content {
          display: block;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .content {
      padding-top: 20px;
      border-top: 1px solid #d4d4d4;
      .btns {
        ::v-deep .el-form-item__content {
          display: block;
          text-align: center;
        }
      }
    }
  }
}
</style>
